<template>
    <div>
            <div class="topList">
                <img :src="bookList.pic_s192" alt="">
            </div>
            <div class="bottomList">
                <ul>
                    <router-link :to="'/SongDetails?songid='+item.song_id" tag="li" v-for="(item,index) in book" :key="index">
                        {{item.title}}
                    </router-link>

                </ul>
            </div>

    </div>
</template>

<script>
    import * as axios from "axios";

    export default {
        name: "ListListDetail.vue",
        data(){
            return {
                size:20,
                bookList:[],
                book:[]
            }
        },
        created() {
                    axios.get("/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=" + this.$route.query.type + "&size=" + this.size).then(res => {
                        console.log(res)
                            this.bookList=res.data.billboard;
                        this.book=res.data.song_list;

                    })
                }
    }
</script>

<style scoped lang="less">
.topList {
    height: 200px;
    img {
        width: 100%;
        height: 100%;
    }
}
.bottomList {
    background-color: #FFFFFF;
    height: calc(100vh - 200px);
    overflow: scroll;
    ul {
        li {
            margin: 0px 20px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #aaa;
        }
    }
}
</style>